<template>
  <el-dialog
    title="审批流程"
    :visible.sync="dialogVisible"
    width="90%"
    :destroy-on-close="true"
    :before-close="handleClose"
  >
    <div class="wrapper">
      <div>
        <el-form ref="form" :model="form" label-width="130px">
          <el-form-item label="查阅内容:">
            <el-checkbox-group
              v-model="checkedSearch"
              disabled
            >
              <el-checkbox
                v-for="item in searchContent"
                :label="item.itemCode"
                :key="item.itemCode"
                >{{ item.itemName }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="第一查阅人:">
            <el-input
              placeholder="请输入姓名"
              v-model="firstPersonName"
              style="width: 100px"
              readonly
            />
            <el-input
              placeholder="请输入身份证号"
              v-model="firstPersonIdcard"
              style="width: 230px"
              readonly
            />
            <el-input
              placeholder="请输入手机号"
              v-model="firstPersonNumber"
              style="width: 230px"
              readonly
            />
            <el-input
              placeholder="请输入工作单位及职务"
              v-model="firstPersonWord"
              style="width: 360px"
              readonly
            />
            <el-select
              v-model="firstPersonFace"
              placeholder="请选择政治面貌"
              style="width: 230px"
              disabled
            >
              <el-option
                v-for="item in firstPersonFaceList"
                :key="item.itemCode"
                :label="item.itemName"
                :value="item.itemCode"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="第二查阅人:">
            <el-input
              placeholder="请输入姓名"
              v-model="secondPersonName"
              style="width: 100px"
              readonly
            />
            <el-input
              placeholder="请输入身份证号"
              v-model="secondPersonIdCard"
              style="width: 230px"
              readonly
            />
            <el-input
              placeholder="请输入手机号"
              v-model="secondPersonNumber"
              style="width: 230px"
              readonly
            />
            <el-input
              placeholder="请输入工作单位及职务"
              v-model="secondPersonWord"
              style="width: 360px"
              readonly
            />
            <el-select
              v-model="secondPersonFace"
              placeholder="请选择政治面貌"
              style="width: 230px"
              disabled
            >
              <el-option
                v-for="item in secondPersonFaceList"
                :key="item.itemCode"
                :label="item.itemName"
                :value="item.itemCode"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-row>
            <el-col :span="6">
              <el-form-item label="查阅事由">
                <el-select
                  v-model="applyContent"
                  placeholder="请选择查阅事由"
                  style="width: 400px"
                  disabled
                >
                  <el-option
                    v-for="item in applyContentList"
                    :key="item.itemCode"
                    :label="item.itemName"
                    :value="item.itemCode"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="查阅类型:">
                <el-radio-group disabled v-model="searchType">
                  <el-radio label="1">仅查阅</el-radio>
                  <el-radio label="2">查阅并打印</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="附件查看:">
                <el-link type="primary" :href="fileUrl" target="_blank">{{
                  titleName
                }}</el-link>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 开始日期和截止日期精确到时分秒连选的 -->
          <el-row>
            <el-col :span="6">
              <el-form-item label="开始日期时间:">
                <el-date-picker
                  v-model="form.start"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期时间"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="截止日期时间:">
                <el-date-picker
                  v-model="form.end"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期时间"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label-width="10px" style="background: #f5f5f5">
            <DocumentCenterVue
              ref="documentCenterRef"
              :personList="personList"
              :applyContentsArray="applyContentsArray"
            />
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 驳回弹框 -->
    <el-dialog
      title="提示"
      :visible.sync="turnDownDialog"
      top="25vh"
      width="30%"
      :before-close="handleTurnDownDialogClose"
      append-to-body
    >
      <h4>驳回原因</h4>
      <el-input
        style="margin: 5px"
        type="textarea"
        :rows="3"
        placeholder="请输入驳回原因"
        v-model="returnContent"
      ></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="turnDownDialog = false">取 消</el-button>
        <el-button type="primary" @click="handleTurnDownDialog"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <span slot="footer" class="dialog-footer">
      <el-button
        size="medium"
        v-if="auditStateFlag"
        type="primary"
        @click="clickAuthorization"
        >授 权</el-button
      >
      <el-button
        size="medium"
        v-if="auditStateFlag"
        type="primary"
        @click="clickApprove"
        >审批通过</el-button
      >
      <el-button
        size="medium"
        v-if="auditStateFlag"
        type="danger"
        @click="turnDown"
        >驳回申请</el-button
      >
    </span>
  </el-dialog>
</template>
    
<script>
import {
  getDetail,
  authorization,
  approval,
  dictionaryList,
  archiveViewApplyPerson,
} from "@/api/datacentersg/achives/documentApi";
import store from "@/store";
import DocumentCenterVue from "./documentCenter.vue";
export default {
  components: { DocumentCenterVue },
  data() {
    return {
      form: {
        start: "",
        end: "",
      },
      applyContent: "",
      applyContentList: [],
      turnDownDialog: false,
      searchType: "1",
      imageData: [],
      treeData: [],
      checkedCities: [],
      selectedImageIndex: 0,
      currentNodekey: "",
      isIndeterminate: true,
      checkAll: false,
      dialogVisible: false,
      row: null,
      rowItem: null,
      returnContent: "",
      applyId: "",
      materialid: "1",
      description: "",
      name: "",
      idCard: "",
      auditState: null,
      auditStateFlag: false,
      valueFlag: false,
      fileUrl: "",
      titleName: "",
      firstPersonName: "",
      firstPersonIdcard: "",
      firstPersonNumber: "",
      firstPersonWord: "",
      firstPersonFace: "",
      firstPersonFaceList: [],
      secondPersonName: "",
      secondPersonIdCard: "",
      secondPersonNumber: "",
      secondPersonWord: "",
      secondPersonFace: "",
      secondPersonFaceList: [],
      searchCheckedAll: false,
      checkedSearch: [],
      searchContent: [],
      timeFlag: false,
      personList: [],
      applyContentsArray:[],
    };
  },
  created() {},
  methods: {
    init(row) {
      this.dialogVisible = true;
      this.row = row;
      if (this.row.auditState === 2) {
        this.timeFlag = true;
      } else {
        this.timeFlag = false;
      }
      this.dictionaryList();
      this.dictionaryListContent();
      this.dictionaryListType();
      this.getListDetail();
    },
    //详情
    getListDetail() {
      const params = {
        userId: store.getters.user_id.toString(),
        token: store.getters.token.toString(),
        data: {
          applyId: this.row.applyId,
        },
      };
      getDetail(params).then((result) => {
        if (result.result) {
          this.titleName = result.resultdata.data.applyName;
          this.applyId = result.resultdata.data.applyId;
          const moment = require("moment");
          const currentTime = moment();
          const startTime = currentTime.format("YYYY-MM-DD HH:mm:ss");
          const endTime = currentTime.add(1, "day").format("YYYY-MM-DD HH:mm:ss");
          this.form.start = result.resultdata.data.startDate?result.resultdata.data.startDate:startTime;
          this.form.end = result.resultdata.data.endDate?result.resultdata.data.endDate:endTime
          this.applyContent = result.resultdata.data.applyContent;
          this.returnContent = result.resultdata.data.returnContent;
          this.auditState = result.resultdata.data.auditState;
          this.firstPersonName = result.resultdata.data.applyFirstPersonName;
          this.firstPersonIdcard =
            result.resultdata.data.applyFirstPersonIdCard;
          this.firstPersonWord = result.resultdata.data.applyFirstPersonJob;
          this.firstPersonNumber = result.resultdata.data.applyFirstPersonPhone;
          this.firstPersonFace =
            result.resultdata.data.applyFirstPersonPolitical;
          this.secondPersonName = result.resultdata.data.applySecondPersonName;
          this.secondPersonIdCard =
            result.resultdata.data.applySecondPersonIdCard;
          this.secondPersonWord = result.resultdata.data.applySecondPersonJob;
          this.secondPersonNumber =
            result.resultdata.data.applySecondPersonPhone;
          this.secondPersonFace =
            result.resultdata.data.applySecondPersonPolitical;
          this.searchType = String(result.resultdata.data.applyType);
          this.checkedSearch = [];
          const applyContentsArray = result.resultdata.data.applyContents
            ? result.resultdata.data.applyContents.split(",")
            : [];
          // 将数组赋值给 checkedSearch
          this.checkedSearch = applyContentsArray;
          this.applyContentsArray = applyContentsArray;
          // console.log(this.applyContentsArray,"app")
          this.fileUrl = result.resultdata.data.fileUrl;
          if (!this.fileUrl) {
            this.titleName = "当前人员无附件内容";
          }
          if (this.auditState === 1) {
            this.auditStateFlag = true;
          } else {
            this.auditStateFlag = false;
          }
          const { personList = [] } = result.resultdata.data;
          const [curpersonItem] = personList;
          this.personList = personList;
          this.checkedCities = []; // 初始化为一个空数组
          this.isIndeterminate = true;
          this.checkAll = false;
          const centerRef = this.$refs.documentCenterRef;
          let lastPerson = curpersonItem;

          if (lastPerson.empowerLable === "全部") {
            centerRef && centerRef.setAllChecked(true);
          } else {
            centerRef && centerRef.setAllChecked(false);
            centerRef && centerRef.setSelectIamge(lastPerson.empowerLable);
          }
          centerRef && centerRef.handlePersonList(lastPerson);
        }
      });
    },

    // checkTreeImg(){
    //    const applyArray = [01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,16]
    //    applyArray.forEach((item)=>{
    //       if(item === 01){

    //       }else if(item === 02){

    //       }
    //    })
    // },
    // 政治面貌字典
    dictionaryList() {
      const params = {
        userId: store.getters.user_id.toString(),
        token: store.getters.token.toString(),
        data: {
          code: "GB4762",
        },
      };
      dictionaryList(params).then((result) => {
        this.firstPersonFaceList = result.resultdata;
        this.secondPersonFaceList = result.resultdata;
      });
    },
    // 查阅事由字典
    dictionaryListContent() {
      const params = {
        userId: store.getters.user_id.toString(),
        token: store.getters.token.toString(),
        data: {
          code: "ARCHIVE01",
        },
      };
      dictionaryList(params).then((result) => {
        this.applyContentList = result.resultdata;
      });
    },
    // 查阅内容分类字典
    dictionaryListType() {
      const params = {
        userId: store.getters.user_id.toString(),
        token: store.getters.token.toString(),
        data: {
          code: "ARCHIVE02",
        },
      };
      dictionaryList(params).then((result) => {
        this.searchContent = result.resultdata;
      });
    },
    // 设置选中数据
    setTreeDataFun(item) {
      try {
        const { empowerLable = "" } = item;
        const fileNames = empowerLable.split(",");
        fileNames.forEach((fileName) => {
          //将拼接的fileName和name还原
          const name = fileName.split("_")[0]; // 获取 name
          const realFileName = fileName.split("_")[1]; // 获取真正的文件名
          // 遍历this.treeData中的每一项
          this.treeData.forEach((treeItem) => {
            if (Array.isArray(treeItem.children)) {
              // 遍历该目录下的每一张图片
              treeItem.children.forEach((imageItem) => {
                if (imageItem.name == name) {
                  // 如果图片文件名相同
                  // 查找对应的图片对象
                  this.imageData.forEach((item) => {
                    let itemFileName = item.fileName.replace(".jpg", "");
                    if (itemFileName == realFileName) {
                      this.checkedCities.push(item.elecId);
                    }
                  });
                }
              });
            }
          });
        });
      } catch (error) {
        console.error("setTreeDataFun", error);
      }
    },

    // 点击小图切换大图
    selectImage(index) {
      this.selectedImageIndex = index;
    },
    // 授权
    clickAuthorization() {
      let empowStr = "";
      let empowId = "";
      const centerRef = this.$refs.documentCenterRef;
      if (centerRef) {
        const { text, dataId } = centerRef.getEmpowerStr();
        empowStr = text;
        empowId = dataId;
      }

      const params = {
        userId: store.getters.user_id.toString(),
        token: store.getters.token.toString(),
        data: {
          empowerLable: empowStr, //授权图片名称和目录名称结合以逗号的形式传入
          dataId: empowId, //授权人id
        },
      };
      authorization(params).then((result) => {
        if (result.result) {
          this.$message({
            message: "授权成功",
            type: "success",
          });
          this.getArchiveViewApplyPerson();
          // 只要授权成功了，我们就保存这个dataid
        }
      });
    },
    // 审批通过
    clickApprove() {
      if (!this.form.start || !this.form.end) {
        this.$message({
          message: "开始日期和截止日期不能为空",
          type: "warning",
        });
      } else {
        const params = {
          userId: store.getters.user_id.toString(),
          token: store.getters.token.toString(),
          data: {
            applyId: this.applyId,
            startDate: this.form.start,
            endDate: this.form.end,
            returnContent: this.returnContent,
            auditState: 2,
          },
        };
        approval(params).then((result) => {
          if (result.result) {
            this.$message({
              message: "审批通过",
              type: "success",
            });
            this.dialogVisible = false;
            this.$emit("initList");
          }
        });
      }
    },
    // 驳回申请
    turnDown() {
      this.turnDownDialog = true;
    },
    handleTurnDownDialog() {
      if (!this.returnContent) {
        this.$message({
          message: "请输入驳回原因",
          type: "warning",
        });
      } else {
        const params = {
          userId: store.getters.user_id.toString(),
          token: store.getters.token.toString(),
          data: {
            applyId: this.applyId,
            startDate: this.form.start,
            endDate: this.form.end,
            returnContent: this.returnContent,
            auditState: 3,
          },
        };
        approval(params).then((result) => {
          if (result.result) {
            this.$message({
              message: "驳回申请成功",
              type: "success",
            });
            this.turnDownDialog = false;
            this.dialogVisible = false;
            this.$emit("initList");
          }
        });
      }
    },
    handleClose() {
      this.dialogVisible = false;
    },
    handleTurnDownDialogClose() {
      this.turnDownDialog = false;
    },

    getArchiveViewApplyPerson() {
      let empowId = "";
      const centerRef = this.$refs.documentCenterRef;
      if (centerRef) {
        const { dataId } = centerRef.getEmpowerStr();
        empowId = dataId;
      }
      if (!empowId) return;
      let params = {
        userId: store.getters.user_id.toString(),
        token: store.getters.token.toString(),
        data: {
          dataId: empowId, //点击当前人的dataid
        },
      };
      archiveViewApplyPerson(params)
        .then((res) => {
          const { data = {} } = res.resultdata;
          console.log(data);
          if (data.empowerLable === "全部") {
            centerRef && centerRef.setAllChecked(true);
            centerRef && centerRef.handlePersonList(data);
            return;
          }
          if (!(data && data.dataId)) return;
          if (Array.isArray(this.personList)) {
            let ix = this.personList.findIndex((f) => f.dataId === data.dataId);
            if (ix > -1) {
              this.$set(this.personList, ix, { ...data });
            }
          }
          centerRef && centerRef.setCurrentSelectImages(data.empowerLable);
        })
        .catch((err) => {});
    },
  },
};
</script>
  
<style scoped>
.wrapper {
  width: 100vw;
  height: 100vh;
}
.left {
  float: left;
  margin-left: 5px;
  background: #f7f2ec;
  width: 18.417vw;
  overflow-y: scroll;
}
.nameStyle {
  text-align: center;
  font-size: 18px;
  color: #409eff;
  overflow-y: scroll;
}
.nameStyle p {
  padding: 5px;
  height: 40px;
}
.highlight {
  background-color: #c6e2ff;
  padding: 5px;
  height: 40px;
}
.right {
  float: left;
  margin-left: 15px;
  background: #f7f2ec;
}
.thumbnail {
  width: 205px;
  overflow-y: scroll;
  float: left;
  margin-bottom: 5px;
  background: #fff;
}
.image-container {
  display: flex;
  padding-right: 0.521vw;
  margin-top: 5px;
  justify-content: space-around;
}
.image-container /deep/.el-checkbox__label {
  display: none;
}

.bigPicture {
  float: left;
  width: 600px;
  margin-bottom: 5px;
  margin-right: 10px;
  background: #fff;
  margin-left: 10px;
}
>>> .el-tree-node__content {
  height: 60px;
}
.centerWarp {
  display: flex;
}
/deep/ .el-tree > .el-tree-node > .el-tree-node__content {
  font-weight: 900;
  background: #cfe5fc;
}
/deep/
  .el-tree
  > .el-tree-node
  > .el-tree-node__children
  > .el-tree-node
  > .el-tree-node__content
  > .el-tree-node__label {
  font-weight: 700;
}
/deep/.el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  background: #6baef1;
}

>>> .el-tree-node__content {
  /* background-color: #CFE5FC; */
  margin-top: 2px;
}
/* checkbox样式修改 */
/* >>> .el-checkbox__input.is-disabled + span.el-checkbox__label {
  color: #606266 !important;
} */
>>> .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
  border-color: #fff !important;
}
>>> .el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #1890ff !important;
  border-color: #1890ff !important;
}
>>> .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #1890ff !important;
}
/* select颜色 */
>>> .el-select .el-input.is-disabled .el-input__inner {
  background: #fff !important;
  color: #606266 !important;
}
/* radio样式 */
>>> .el-radio__input.is-disabled.is-checked .el-radio__inner::after {
  background-color: #fff !important;
}
>>> .el-radio__input.is-disabled.is-checked .el-radio__inner {
  background: #409eff !important;
}
>>> .el-radio__input.is-checked + .el-radio__label {
  color: #409eff !important;
}
</style>